<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>青橙</title>
    <meta name="description" content="青橙">
    <meta name="keywords" content="青橙">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/theme-chalk.css">
    <link rel="stylesheet" href="css/login_style.css">
    <style type="text/css">
    .el-main{
        position: absolute;
        top: 83px;
        bottom: 0px;
        left: 220px;
        right: 10px;
        padding: 0;
    }
    </style>
</head>

<body class="hold-transition skin-purple sidebar-mini">
    <div id="app">
        <el-container>
            <el-header  class="main-header" style="height:60px;">
                <!-- 导航 -->
                <nav class="navbar navbar-static-top" :class=''>
                    <!-- Logo -->
                    <a href="all-admin-index.html" class="logo" style="text-align:center">
                        <span class="logo-lg"  v-show='!isCollapse'><img src="img/logo.png"></span>
                    </a>
                    <div class="right-menu">
                        <el-dropdown class="avatar-container right-menu-item" trigger="click">
                            <div class="avatar-wrapper">
                                <img src="img/user2-160x160.jpg" class="user-avatar">
                                {{loginName}}
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item divided>
                                    <span style="display:block;" @click="formVisible = true">修改密码</span>
                                </el-dropdown-item>
                                <el-dropdown-item divided>
                                    <span style="display:block;" @click="exit()">退出</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                    <!--修改密码部分-->
                    <div class="add-form">
                        <!--弹出窗口-->
                        <el-dialog  title="修改密码" :visible.sync="formVisible" >
                            <!--<el-form label-width="80px">

                                <el-form-item label="*用户名"><el-input v-model="pojo.name"></el-input></el-form-item>
                                <el-form-item label="*Email"><el-input v-model="pojo.name"></el-input></el-form-item>
                                <el-form-item label="*旧密码"><el-input v-model="pojo.name"></el-input></el-form-item>
                                <el-form-item label="*新密码"><el-input v-model="pojo.name"></el-input></el-form-item>
                                <el-form-item label="*确认密码"><el-input v-model="pojo.name"></el-input></el-form-item>

                                &lt;!&ndash; 图片上传代码 如页面有图片上传功能放开注释 ****
                                <el-form-item label="图片">
                                    <el-upload
                                            class="avatar-uploader"
                                            action="/upload/native.do"
                                            :show-file-list="false"
                                            :on-success="handleAvatarSuccess"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                                &ndash;&gt;
                                <el-form-item>
                                    <el-button type="primary" @click="save()">保存</el-button>
                                    <el-button @click="formVisible = false" >关闭</el-button>
                                </el-form-item>
                            </el-form>-->
                            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                                <el-form-item label="用户名" prop="username">
                                    <el-input type="username" v-model="ruleForm.username" autocomplete="off"></el-input>
                                </el-form-item>

                                <el-form-item label="旧密码" prop="oldPass">
                                    <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
                                </el-form-item>

                                <el-form-item label="新密码" prop="pass">
                                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="checkPass">
                                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" @click="save()">提交</el-button>
                                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                                </el-form-item>
                            </el-form>


                        </el-dialog>
                    </div>




                    <!-- 导航 -->
                    <div class="topbar-title">
                        <el-row>
                            <el-col :span="24">
                            <el-menu class="el-menu-demo headNav" mode="horizontal" :default-active="defaultActiveIndex">
                                <el-menu-item :index="item.path" v-for="item in menuList" @click="handleSelect(item)" ><i class="iconNav" :class="item.icon"></i>{{item.title}}</el-menu-item>
                            </el-menu>
                            </el-col>
                        </el-row>
                    </div> 
                    <!-- end -->
                </nav>
                <!-- end -->
            </el-header>
            <el-container>
                <!-- 左侧菜单 -->
                <el-aside :width="tabWidth+'px'" id="asieHeight">
                    <el-menu :default-active="defaultActive"  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" :default-openeds="openeds">
                        <sidebar-item :key="data.path" v-for="data in data.children" :item="data" />
                    </el-menu>
                </el-aside>
                <!-- end -->
                <!-- iframe导入对应的模块内容 -->
                <el-container>
                    <iframe name="right" id="iframepage" :src="linkUrl" style="width:100%;magrin:0 auto" marginwidth="0" marginheight="0" height="100%" frameborder="0" ranat="server"></iframe>
                    <!-- <iframe  name="mainFrame" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no" src="goods_edit.html" style="width:100%;magrin:0 auto"></iframe> -->
                </el-container>
                <!--  -->
            </el-container>
        </el-container>
        <!-- 底部 -->
        <!--<el-footer>-->
            <!--<footer class="main-footer">-->
                <!--<div class="pull-right hidden-xs">-->
                    <!--<b>Version</b> 1.0-->
                <!--</div>-->
                <!--<strong>Copyright &copy; 2016-2019 <a href="http://www.itcast.cn">研究院研发部</a>.</strong> All rights reserved.-->
            <!--</footer>-->
        <!--</el-footer>-->
        <!-- end -->
    </div>
</body>
<!-- 引入组件库 -->
<script src="/js/axios.js"></script>
<script src="js/vue.js"></script><!-- vue -->
<script src="js/elementui.js"></script><!-- element-ui -->

<script>
    // 左侧菜单组件
    Vue.component('sidebar-item', {
        props: {
            item: {
            type: Object,
            required: true
            }
        },
        template: `
        <div v-if="item.children">
            <template v-if="item.children.length == 0">
                <el-menu-item :index="item.path">
                <i class="icon" :class="item.icon"></i>
                <a :href="item.linkUrl" target="right">{{item.title}}</a>
                </el-menu-item>
            </template>
            <template v-else :index="item.path">
                <div slot="title" class="el-submenu__title">
                    <i class="icon" :class="item.icon"></i>
                    {{item.title}}
                </div>

                <template v-for="child in item.children">
                    <sidebar-item
                    v-if="child.children&&child.children.length>0"
                    :item="child"
                    :key="child.path"/>
                    <el-menu-item v-else :key="child.path" :index="child.path" style='padding-left:58px'>
                    <a :href="child.linkUrl" target="right">{{child.title}}</a>
                    </el-menu-item>
                </template>
            </template>          
        </div>`
    });
    new Vue({
        el: '#app',
        // router,
        data() {

            var checkUsername = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('姓名不能为空'));
                }
                setTimeout(() => {
                    /*if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 18) {
                            callback(new Error('必须年满18岁'));
                        } else {
                            callback();
                        }
                    }*/
                }, 1000);
            };

            var validateOldPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入原始密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    //callback();
                }
                if (value === this.ruleForm.oldPass){
                    callback(new Error('新密码与原密码重复'));
                }else {
                    callback();
                }
            };

            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };


        return { 
            visible: false,
            isCollapse: false,
            tabWidth: 180,
            test1: 1,
            intelval: null,
            winfo:'winfo',
            data:[],
            menuList:[],
            defaultActiveIndex: "2",
            defaultActive:'2-1-2',
            openeds: [],
            loginName: '',
            linkUrl:'info.html',
            pojo:{},
            formVisible: false,

            ruleForm: {
                pass: '',
                checkPass: '',
                username: '',
                oldPass:''
            },
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                oldPass: [
                    { validator: validateOldPass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                username: [
                    { validator: checkUsername, trigger: 'blur' }
                ]
            }
        };
    },
        created() {
            var linkUrl=localStorage.getItem('linkUrl');
            var activeIndex=localStorage.getItem('activeIndex');
            if(linkUrl!=='undefined'){
                this.linkUrl=linkUrl;
                this.defaultActiveIndex=activeIndex;
            }

            //加载菜单数据
            axios.get('/menu/findMenu.do').then( response=>{
                // 获取导航数据
                this.menuList=response.data;
                // 导航默认选择
                this.data=response.data[1];
                var data=[];
                /*for(var i=0;i<this.data[1].children.length;i++){
                    data.push(this.data[1].children[i].path)
                }*/
                this.openeds=data
            } );


            //加载并显示当前登录名
            axios.get('/login/name.do').then( response=>{
                this.loginName= response.data.name;
                this.ruleForm.username = this.loginName;
            });


        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            // 选择顶部导航菜单，联动左侧菜单
            handleSelect(key) {
                localStorage.setItem('linkUrl',key.linkUrl)
                localStorage.setItem('activeIndex',key.path)
                var data=[]
                for(var i=0;i<key.children.length;i++){
                    data.push(key.children[i].path)
                    this.defaultActive=key.children[0].children[0].path
                    this.linkUrl=key.children[0].linkUrl
                }
                this.openeds=data
                this.data=key
            },
            exit(){
                axios.post('/logout').then( response=>{
                    location.href='login.html';
                })
            },

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            save(){
                if (this.ruleForm.pass==this.ruleForm.checkPass){
                axios.post(`/admin/updatePassword.do`,this.ruleForm).then(response=>{
                    if(response.data.code===1){
                        alert(response.data.message);
                    }else {
                        alert("密码修改成功!");
                        this.formVisible = false;
                        this.exit();
                    }
                });
                }else {
                    alert("新密码与确认密码不一致!");
                }
            }
        }
    });
    
    window.onload = windowHeight; //页面载入完毕执行函数
    function windowHeight() {
        var wd = 220;
        var iframepage=document.getElementById("iframepage")
        var asieHeight=document.getElementById("asieHeight")
        iframepage.style.width=document.documentElement.clientWidth-wd + 'px'
        asieHeight.style.height=document.documentElement.clientHeight + 'px'
    }   
</script>
</html>
